<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> 
<html class="no-js"> <!--<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="description" content="Bingo One page parallax responsive HTML Template ">
  
  <meta name="author" content="Themefisher.com">

  <title>Navigator | Responsive Multipurpose Bootstrap HTML5 Template</title>

<!-- Mobile Specific Meta
  ================================================== -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Favicon -->
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
  
  <!-- CSS
  ================================================== -->
  <!-- Themefisher Icon font -->
  <link rel="stylesheet" href="plugins/themefisher-font/style.css">
  <!-- bootstrap.min css -->
  <link rel="stylesheet" href="plugins/bootstrap/dist/css/bootstrap.min.css">
  <!-- Lightbox.min css -->
  <link rel="stylesheet" href="plugins/lightbox2/dist/css/lightbox.min.css">
  <!-- Slick Carousel -->
  <link rel="stylesheet" href="plugins/slick-carousel/slick/slick.css">
  <link rel="stylesheet" href="plugins/slick-carousel/slick/slick-theme.css">
  <!-- Main Stylesheet -->
  <link rel="stylesheet" href="css/style.css">


  <!-- Colors -->
  <!-- <link rel="stylesheet" type="text/css" href="css/colors/green.css" title="green">
  <link rel="stylesheet" type="text/css" href="css/colors/red.css" title="light-red">
  <link rel="stylesheet" type="text/css" href="css/colors/light-blue.css" title="light-blue">
  <link rel="stylesheet" type="text/css" href="css/colors/yellow.css" title="yellow">
  <link rel="stylesheet" type="text/css" href="css/colors/light-green.css" title="light-green">
  <link rel="stylesheet" type="text/css" href="css/colors/blue.css" title="blue"> -->
  

</head>

<body id="body">

 <!--
  Start Preloader
  ==================================== -->
  <div id="preloader">
    <div class="preloader">
      <div class="sk-circle1 sk-child"></div>
      <div class="sk-circle2 sk-child"></div>
      <div class="sk-circle3 sk-child"></div>
      <div class="sk-circle4 sk-child"></div>
      <div class="sk-circle5 sk-child"></div>
      <div class="sk-circle6 sk-child"></div>
      <div class="sk-circle7 sk-child"></div>
      <div class="sk-circle8 sk-child"></div>
      <div class="sk-circle9 sk-child"></div>
      <div class="sk-circle10 sk-child"></div>
      <div class="sk-circle11 sk-child"></div>
      <div class="sk-circle12 sk-child"></div>
    </div>
  </div> 
  <!--
  End Preloader
  ==================================== -->


  

<!--
Fixed Navigation
==================================== -->
<section class="header  navigation">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <nav class="navbar navbar-expand-md">
               <a class="navbar-brand" href="index.html">
                  <img src="images/logo.png" alt="logo">
               </a>  
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="tf-ion-android-menu"></span>
            </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
               <li class="nav-item active">
                  <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="about.html">About</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="service.html">Service</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="portfolio.html">Portfolio</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="contact.html">Contact</a>
               </li>
               <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Pages
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                     <a class="dropdown-item" href="404.html">404 Page</a>
                  </div>
               </li>
            </ul>
         </div>
      </nav>
      
   </div>
</div>
</div>
</section>

<section class="single-page-header">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h2>About Us</h2>
				<nav aria-label="breadcrumb mx-auto" role="navigation">
				  <ol class="breadcrumb">
				    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
				    <li class="breadcrumb-item active" aria-current="page">About Us</li>
				  </ol>
				</nav>
			</div>
		</div>
	</div>
</section>

<!--
Start About Section
==================================== -->
<section class="about-2 section bg-gray" id="about">
	<div class="container">
		<div class="row">
			<div class="col-12 col-md-5">
				<h2>We have explored the digital landscape with passion for a long time</h2>
			</div>
			<div class="col-12 col-md-7">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae deleniti ipsa labore necessitatibus culpa veritatis quo accusantium, neque enim ea ad eaque iure, quas tempore velit, quibusdam dolor illo! Explicabo.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quisquam maiores iste soluta, nihil dolorem?</p>
			</div>
			
		</div> 		<!-- End row -->
	</div>   	<!-- End container -->
</section>   <!-- End section -->

<section class="about-mission-vision section">
	<div class="container">
		<div class="row">
				<div class="col">
					<div class="title">
						<h4>Little more brief</h4>
						<h2>About Us.</h2>
						<span class="border"></span>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
					</div>
				</div>
			</div>
		<div class="row">
			<div class="col-md-12">
				<div class="commonTab">
					<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
					  	<li class="nav-item">
					    	<a class="nav-link active" id="home-tab" data-toggle="tab" href="#philosophy" role="tab" aria-controls="philosophy" aria-selected="true">Our Philosophy</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link" id="profile-tab" data-toggle="tab" href="#mission" role="tab" aria-controls="mission" aria-selected="false">mission</a>
					  	</li>
					  	<li class="nav-item">
					    	<a class="nav-link" id="contact-tab" data-toggle="tab" href="#vision" role="tab" aria-controls="vision" aria-selected="false">vision</a>
					  	</li>
					</ul>
					<div class="tab-content" id="myTabContent">
					  	<div class="tab-pane fade show active" id="philosophy" role="tabpanel" aria-labelledby="home-tab">
					  		<div class="row">
								<div class="col-md-6 align-self-center">
									<h2>We Create Designs<br> and technology</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptate molestias, quaerat quo natus dolor harum voluptatibus modi dicta ducimus.</p>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quae officia earum dolore est quaerat cupiditate voluptatibus id, magni alias veniam voluptate, libero explicabo, distinctio atque!</p>
								</div>
								<div class="col-md-6">
									<img class="img-fluid rounded shadow " src="images/company/company-image.jpg" alt="">
								</div>
							</div>
					  	</div>
					  	<div class="tab-pane fade" id="mission" role="tabpanel" aria-labelledby="profile-tab">
					  		<div class="row">
								<div class="col-md-6 align-self-center">
									<h2>Our Mission</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptate molestias, quaerat quo natus dolor harum voluptatibus modi dicta ducimus.</p>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quae officia earum dolore est quaerat cupiditate voluptatibus id, magni alias veniam voluptate, libero explicabo, distinctio atque!</p>
								</div>
								<div class="col-md-6">
									<img class="img-fluid rounded shadow mt-20" src="images/company/company-image-2.jpg" alt="">
								</div>
							</div>
					  	</div>
					  	<div class="tab-pane fade" id="vision" role="tabpanel" aria-labelledby="contact-tab">
					  		<div class="row">
								<div class="col-md-6 align-self-center">
									<h2>Our Vision</h2>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptate molestias, quaerat quo natus dolor harum voluptatibus modi dicta ducimus.</p>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quae officia earum dolore est quaerat cupiditate voluptatibus id, magni alias veniam voluptate, libero explicabo, distinctio atque!</p>
								</div>
								<div class="col-md-6">
									<img class="img-fluid rounded shadow mt-20" src="images/company/company-image-3.jpg" alt="">
								</div>
							</div>
					  	</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


<!-- Start Our Team
		=========================================== -->
	<section class="team section bg-gray" id="team">
		<div class="container">
			<div class="row">
				<div class="col">
					<div class="title text-center">
						<h4>TEAM MEMBER</h4>
						<h2>Our Team.</h2>
						<span class="border"></span>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum reiciendis quasi itaque, obcaecati atque sit!</p>
					</div>
				</div>
			</div>
			<div class="row">
				<!-- team member -->
				<div class="col-12 col-md-3 col-sm-6" >
	               <div class="team-member text-center">
						<div class="member-photo">
							<!-- member photo -->
							<img class="img-fluid" src="images/team/member-1.jpg" alt="team people">
							<!-- /member photo -->
						</div>
						
						<!-- member name & designation -->
						<div class="member-content">
							<h3>Shawshank Redemption</h3>
							<span>Head Of Marketing</span>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
							<ul class="list-inline">
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>					
							</ul>
						</div>
						<!-- /member name & designation -->
					   
	               </div>
	            </div>
				<!-- end team member -->
				
				<!-- team member -->
				<div class="col-12 col-md-3 col-sm-6" >
	               <div class="team-member text-center">
						<div class="member-photo">
							<!-- member photo -->
							<img class="img-fluid" src="images/team/member-2.jpg" alt="team people">
							<!-- /member photo -->
						</div>
						
						<!-- member name & designation -->
						<div class="member-content">
							<h3>Luis Anthon</h3>
							<span>Web Developer</span>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
							<ul class="list-inline">
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>					
							</ul>
						</div>
						<!-- /member name & designation -->
					</div>
	            </div>
				<!-- end team member -->
				
				<!-- team member -->
				<div class="col-12 col-md-3 col-sm-6">
	               <div class="team-member text-center">
						<div class="member-photo">
							<!-- member photo -->
							<img class="img-fluid" src="images/team/member-3.jpg" alt="team people">
							<!-- /member photo -->
						
						</div>
						
						<!-- member name & designation -->
						<div class="member-content">
							<h3>Jonathon Andrew</h3>
							<span>Head Of Management</span>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
							<ul class="list-inline">
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>					
							</ul>
						</div>
						<!-- /member name & designation -->
						
	               </div>
	            </div>
				<!-- end team member -->
				<!-- team member -->
				<div class="col-12 col-md-3 col-sm-6">
	               <div class="team-member text-center">
						<div class="member-photo">
							<!-- member photo -->
							<img class="img-fluid" src="images/team/member-4.jpg" alt="team people">
							<!-- /member photo -->
					
						</div>
						
						<!-- member name & designation -->
						<div class="member-content">
							<h3>Michael Jonson</h3>
							<span>Head Of Management</span>
							<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur necessitatibus ullam, culpa odio.</p>
							<ul class="list-inline">
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-facebook"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-twitter"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-google-outline"></i></a></li>
								<li class="list-inline-item"><a href="#"><i class="tf-ion-social-dribbble"></i></a></li>					
							</ul>
						</div>
						<!-- /member name & designation -->
						
	               </div>
	            </div>
				<!-- end team member -->
			</div>  	<!-- End row -->
		</div>   	<!-- End container -->
	</section>   <!-- End section -->

<!--
Start Call To Action
==================================== -->
<section class="call-to-action section">
	<div class="container">
		<div class="row">
			<div class="col-md-12 text-center">
				<h2>Let's Create Something Together</h2>
				<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicudin bibendum auctor, <br> nisi elit consequat ipsum, nesagittis sem nid elit. Duis sed odio sitain elit.</p>
				<a href="" class="btn btn-main">Contact Us</a>
			</div>
		</div> 		<!-- End row -->
	</div>   	<!-- End container -->
</section>   <!-- End section -->

<footer id="footer" class="bg-one">
  <div class="top-footer">
    <div class="container">
      <div class="row">
        <div class="col-sm-3 col-md-3 col-lg-3">
          <h3>About</h3>
          <p>Integer posuere erat a ante venenati dapibus posuere velit aliquet. Fusce dapibus, tellus cursus commodo, tortor mauris sed posuere.</p>
        </div>
        <!-- End of .col-sm-3 -->

        <div class="col-sm-3 col-md-3 col-lg-3">
          <h3>Our Services</h3>
          <ul>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
          </ul>
        </div>
        <!-- End of .col-sm-3 -->

        <div class="col-sm-3 col-md-3 col-lg-3">
          <h3>Quick Links</h3>
          <ul>
            <li><a href="#">Partners</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">FAQ’s</a></li>
            <li><a href="#">Badges</a></li>
          </ul>
        </div>
        <!-- End of .col-sm-3 -->

        <div class="col-sm-3 col-md-3 col-lg-3">
          <h3>Subscribe Now</h3>
          <form class="subscribe-form">
            <div class="form-group">
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-main-sm">Subscribe Now</button>
          </form>
        </div>
        <!-- End of .col-sm-3 -->

      </div>
    </div> <!-- end container -->
  </div>
  <div class="footer-bottom">
    <h5>Copyright 2018. All rights reserved.</h5>
    <h6>Design and Developed by themefisher.com<br>Get More <a href="https://themefisher.com/free-bootstrap-templates/" target="_blank">Free Bootstrap Templates</a></h6>
  </div>
</footer> <!-- end footer -->


    <!-- end Footer Area
    ========================================== -->


    
    <!-- 
    Essential Scripts
    =====================================-->
    
    <!-- Main jQuery -->
    <script src="plugins/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.7 -->
    <script src="plugins/bootstrap/dist/js/popper.min.js"></script>
    <script src="plugins/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Parallax -->
    <script src="plugins/parallax/jquery.parallax-1.1.3.js"></script>
    <!-- lightbox -->
    <script src="plugins/lightbox2/dist/js/lightbox.min.js"></script>
    <!-- Owl Carousel -->
    <script src="plugins/slick-carousel/slick/slick.min.js"></script>
    <!-- Portfolio Filtering -->
    <script src="plugins/mixitup/dist/mixitup.min.js"></script>
    <!-- Smooth Scroll js -->
    <script src="plugins/smooth-scroll/dist/js/smooth-scroll.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCC72vZw-6tGqFyRhhg5CkF2fqfILn2Tsw"></script>
    
    <!-- Custom js -->
    <script src="js/script.js"></script>

  </body>
  </html>